<template>
  <div class="mui-content">
    <div v-if="remind" class="remindContent">
      <div ><span class="remind">{{remindWord}}</span></div>
    </div>
  </div>

</template>

<script>
    export default {
        name: "remind.vue",
      data(){
        return{
          remind:false
        }
      },
      props:{
        remindWord:String,
      },
      methods:{
          test(){
            let me=this
            me.remind=true;
            setTimeout(function () {
              me.remind=false;
            },1500)
          }
      }
    }
</script>

<style scoped>
  .mui-content .remindContent{
    position: fixed;
    width: 100%;
    height: 10%;
    /*background-color: yellow;*/
    z-index: 999;
    top: 45%;
    display: flex;
    align-items: center;
    justify-content:center ;
  }
  .mui-content .remindContent .remind{
    background-color: rgb(76, 76, 76);
    color:white;
    padding: 5px 10px 5px 18px;
    border-radius: 20px;
    font-size: 0.8rem;

  }
</style>
